<template>
    <div class="box">
        <div>
            <el-button type="primary" @click="show()">审批</el-button>
        </div>
        <approval-dialog v-model="disvisable" :options="options"></approval-dialog>
        <ul class="cardList">
            <!-- <li>
                <card-templete></card-templete>
            </li>
            <li>
                <card-templete></card-templete>
            </li> -->
            <li>
                <item-card></item-card>
            </li>
            <li>
                <item-card :state="1" :keyIndex="1"></item-card>
            </li>
            <li>
                <item-card :state="2" :keyIndex="2"></item-card>
            </li>
            <li>
                <item-card :state="3" :keyIndex="3"></item-card>
            </li>
        </ul>
        <!-- 轮播图实现 -->
        <card-swiper></card-swiper>
        <!-- 内部实现 -->
        <card-scroll :dataList="dataList"></card-scroll>
        <!-- 使用插槽实现 -->
        <!-- <card-scroll-slot :dataList="dataList">
            <template v-slot:card="props">
                <card-templete :color="props.item.color" :num="props.item.num" :receiveInfo="props.item.receiveInfo"
                    :receiveMoney="props.item.receiveMoney" :title="props.item.title" :unit="props.item.unit">
                </card-templete>
            </template>
        </card-scroll-slot> -->

        <step-stripe :dataList="dataList1" @EmitActived="receiveActive"></step-stripe>
        <!-- <json-table :tableHeads="tableHeads" ></json-table> -->
    </div>
</template>

<script>
import cardTemplete from "@/components/card/index.vue"
import cardSwiper from "@/components/cardSwiper/index.vue"
import cardScroll from "@/components/cardScroll/index.vue"
import cardScrollSlot from "@/components/cardScrollSlot/index.vue"
import itemCard from "@/components/stepStripe/itemCard/index.vue"
import stepStripe from "@/components/stepStripe/index.vue"
import jsonTable from "@/components/JsonTable/index.vue"
import approvalDialog from "@/components/dialog/ApprovalDialog"
export default {
    data() {
        return {
            dataList: [{
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#6393E8"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#C269F8"
            },
            {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#FF9446"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#1EC4DB"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#4EC795"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#F07878"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#D5B84E"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#6393E8"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#C269F8"
            }, {
                title: "项目总数",
                num: 16,
                receiveInfo: "收入合同额",
                unit: "万元",
                receiveMoney: 206908.06,
                color: "#FF9446"
            }],
            dataList1: [{
                title: "项目立项项目立项项目立项项目立项",
                percent: "100%",
                state: 1
            }, {
                title: "项目立项",
                percent: "100%",
                state: 1
            }, {
                title: "项目立项",
                percent: "60%",
                state: 2
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            }, {
                title: "项目立项",
                percent: "0%",
                state: 3
            },],
            tableHeads: [{
                label: "姓名",
            }, {
                label: "性别",
            }, {
                label: "年龄",
            }],
            disvisable: false,
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
        }
    },
    methods: {
        receiveActive(val) {
            console.log(val);
        },
        show() {
            this.disvisable = true
        }
    },
    components: {
        cardTemplete,
        cardSwiper,
        cardScroll,
        cardScrollSlot,
        itemCard,
        stepStripe,
        jsonTable,
        approvalDialog
    }
}
</script>

<style lang="scss" scoped>
.box {
    .cardList {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;

        li {
            // margin: 10px;
            list-style: none;
            width: 101px;
            height: 112px;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            margin-right: 16px;
        }
    }
}
</style>